<template>
    <el-form :model="diaryForm" label-width="100px">
      <el-form-item label="日记标题" prop="title">
        <el-input v-model="diaryForm.title" placeholder="请输入日记标题"></el-input>
      </el-form-item>
  
      <el-form-item label="日记内容" prop="content">
        <el-input
          type="textarea"
          v-model="diaryForm.content"
          placeholder="请输入日记内容"
          rows="10"
        ></el-input>
      </el-form-item>
  
      <el-form-item label="天气" prop="weather">
        <el-input v-model="diaryForm.weather" placeholder="请输入天气"></el-input>
      </el-form-item>
  
      <el-form-item label="心情" prop="mood">
        <el-input v-model="diaryForm.mood" placeholder="请输入心情"></el-input>
      </el-form-item>
  
      <el-form-item>
        <el-button type="primary" @click="saveDiary">保存</el-button>
        <el-button @click="cancel">取消</el-button>
        <el-button type="danger" @click="deleteDiary" v-if="diaryId">删除</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  
  // 模拟的日记数据
  const diaries = ref([
    { id: 1, title: '第一篇日记', content: '今天是个好日子，心情很好。', date: '2024-10-01', weather: '晴', mood: '开心' },
    { id: 2, title: '第二篇日记', content: '忙碌的一天，完成了很多任务。', date: '2024-10-02', weather: '多云', mood: '疲惫' },
    { id: 3, title: '第三篇日记', content: '遇到了一些挑战，但我克服了它们。', date: '2024-10-03', weather: '雨', mood: '沮丧' },
  ]);
  
  const route = useRoute();
  const router = useRouter();
  
  const diaryForm = ref({
    title: '',
    content: '',
    weather: '',
    mood: ''
  });
  
  const diaryId = route.params.diaryId;
  
  // 获取当前编辑的日记数据
  onMounted(() => {
    if (diaryId) {
      const diaryToEdit = diaries.value.find(diary => diary.id === parseInt(diaryId));
      if (diaryToEdit) {
        diaryForm.value = { ...diaryToEdit };
      }
    }
  });
  
  // 保存日记
  const saveDiary = () => {
    if (!diaryForm.value.title || !diaryForm.value.content) {
      ElMessage.error('请填写完整的日记内容');
      return;
    }
  
    if (diaryId) {
      // 编辑现有日记
      const diaryIndex = diaries.value.findIndex(diary => diary.id === parseInt(diaryId));
      if (diaryIndex !== -1) {
        diaries.value[diaryIndex] = { ...diaryForm.value, id: parseInt(diaryId) };
        ElMessage.success('日记已保存');
      }
    } else {
      // 添加新日记
      const newId = diaries.value.length ? Math.max(...diaries.value.map(d => d.id)) + 1 : 1;
      diaries.value.push({ ...diaryForm.value, id: newId, date: new Date().toISOString().split('T')[0] });
      ElMessage.success('新日记已保存');
    }
  
    router.push({ name: 'HomePage' });
  };
  
  // 删除日记
  const deleteDiary = () => {
    if (diaryId) {
      const diaryIndex = diaries.value.findIndex(diary => diary.id === parseInt(diaryId));
      if (diaryIndex !== -1) {
        diaries.value.splice(diaryIndex, 1);
        ElMessage.success('日记已删除');
        router.push({ name: 'HomePage' });
      }
    }
  };
  
  // 取消编辑
  const cancel = () => {
    router.push({ name: 'HomePage' });  // 返回到日记页面
  };
  </script>
  
  <style scoped>
  .el-form {
    max-width: 600px;
    margin: 0 auto;
  }
  
  .el-button {
    margin-right: 10px;
  }
  </style>
  